import React, { useState, useEffect } from 'react';
import SelfHead from 'components/common/selfHead';
import SelfCard from './components/selfCard';
import SelfPicker from 'components/common/selfPicker';
import Paging from 'components/common/paging';
import { getSite, getDicType, getSupplyList } from 'ser/actions';
import './index.less';

export default function Supply() {
  const [list, setList] = useState([]);
  const [pageNumber, setPageNumber] = useState(1);
  const [pageSize, setPageSize] = useState(30);
  // 一级省份数据
  const [province, setProvince] = useState([]);
  // 所有地点数据
  const [site, setSite] = useState([]);
  const [obj, setObj] = useState({
    deliveryAddress: null, // 始发站
    destinationAddress: null, // 目的站
    transportWay: null, // 运输方式
    transportCategory: null, // 运输类别
  });
  const [type, setType] = useState([]);
  const [natWay, setNatWay] = useState([]);
  const [coldWay, setColdWay] = useState([]);
  const [way, setWay] = useState([]);
  const [done, setDone] = useState(false);
  useEffect(() => {
    async function fetchData() {
      const stair = await getSite({ areaCode: 0 });
      if (stair.code === 0) {
        setSite([
          {
            value: '',
            label: '请选择',
          },
          ...stair.rows,
        ]);
        setProvince([
          {
            value: '',
            label: '请选择',
          },
          ...stair.rows,
        ]);
      }
    }
    fetchData();
  }, []);
  useEffect(() => {
    async function fetchData() {
      const dic1 = await getDicType({ value: 'transportCategory' }); // 运输类型
      const dic2 = await getDicType({ value: 'natTransportType' }); // 常温运输方式
      const dic3 = await getDicType({ value: 'coldTransportType' }); // 冷链运输方式
      if (dic1.code === 0) {
        setType(
          dic1.rows.map(item => {
            return {
              value: item.value,
              label: item.name,
            };
          }),
        );
      }
      if (dic2.code === 0) {
        setNatWay([
          ...dic2.rows.map(item => {
            return {
              value: dic1.rows[0].value + ',' + item.value,
              label: dic1.rows[0].name + '-' + item.name,
            };
          }),
        ]);
      }
      if (dic3.code === 0) {
        setColdWay([
          ...dic3.rows.map(item => {
            return {
              value: dic1.rows[1].value + ',' + item.value,
              label: dic1.rows[1].name + '-' + item.name,
            };
          }),
        ]);
        setWay([
          ...dic2.rows.map(item => {
            return {
              value: dic1.rows[0].value + ',' + item.value,
              label: dic1.rows[0].name + '-' + item.name,
            };
          }),
          ...dic3.rows.map(item => {
            return {
              value: dic1.rows[1].value + ',' + item.value,
              label: dic1.rows[1].name + '-' + item.name,
            };
          }),
        ]);
      }
    }
    fetchData();
  }, []);
  useEffect(() => {
    async function fetchList() {
      const res = await getSupplyList({
        pageNumber,
        pageSize,
        ...obj,
      });
      if (res.rows.rows.length) {
        setDone(false);
        setList([...list, ...res.rows.rows]);
      } else {
        setDone(true);
      }
    }
    fetchList();
  }, [pageNumber, pageSize]);
  useEffect(() => {
    async function fetchList() {
      const res = await getSupplyList({
        pageNumber,
        pageSize,
        ...obj,
      });
      if (res.code === 0) {
        setList([...res.rows.rows]);
      }
    }
    fetchList();
  }, [obj]);
  function handlePickerChange(v, label) {
    setPageNumber(1);
    switch (label) {
      case '始发站':
        setObj({
          ...obj,
          deliveryAddress: v.length > 0 ? v.join(',') : null,
        });
        break;
      case '目的站':
        setObj({
          ...obj,
          destinationAddress: v.length > 0 ? v.join(',') : null,
        });
        break;
      case '运输方式':
        setObj({
          ...obj,
          transportCategory: v[0].slice(0, 2),
          transportWay: v[0].slice(3),
        });
        break;
      case '运输类别':
        if (v[0] === '01') {
          setWay(natWay);
          setObj({
            ...obj,
            transportCategory: v[0],
            transportWay: natWay.some(
              item => item.value.slice(3) === obj.transportWay,
            )
              ? obj.transportWay
              : null,
          });
        }
        if (v[0] === '02') {
          setWay(coldWay);
          setObj({
            ...obj,
            transportCategory: v[0],
            transportWay: coldWay.some(
              item => item.value.slice(3) === obj.transportWay,
            )
              ? obj.transportWay
              : null,
          });
        }
        break;
    }
  }
  async function handleOnPickerChange(val) {
    if (val.length === 1 && val[0] !== '') {
      const secound = await getSite({ areaCode: val[0] });
      if (secound.code === 0) {
        let arr = province.map(item => {
          if (item.value === val[0]) {
            item.children = [
              {
                value: '',
                label: '请选择',
              },
              ...secound.rows,
            ];
          }
          return item;
        });
        setSite(arr);
      }
    }
  }
  const Items =
    list.length > 0 &&
    list.map((item, index) => {
      return <SelfCard key={index} cardData={item} />;
    });
  return (
    <div className="supply">
      <SelfHead title="找货源需求" />
      <div className="supply-head">
        <SelfPicker
          label="始发站"
          cols={2}
          pickerData={site}
          handlePickerChange={handlePickerChange}
          handleOnPickerChange={handleOnPickerChange}
        />
        <SelfPicker
          label="目的站"
          cols={2}
          pickerData={site}
          handlePickerChange={handlePickerChange}
          handleOnPickerChange={handleOnPickerChange}
        />
        <SelfPicker
          label="运输类别"
          cols={1}
          pickerData={type}
          handlePickerChange={handlePickerChange}
        />
        <SelfPicker
          label="运输方式"
          cols={1}
          pickerData={way}
          handlePickerChange={handlePickerChange}
        />
      </div>
      <div className="supply-content">
        <Paging
          render={() => Items}
          handlePageChange={() => setPageNumber(pageNumber + 1)}
          done={done}
        />
      </div>
    </div>
  );
}
